<template>
	<view class="contianer">
		<view class="input-bg">
			<view class="input-container">
				<view class="input"><input type="text" placeholder="请输入您想搜索的谱名" v-model="value" /></view>
				<view class="icon" @tap="search">
					<image src="/static/img/search.png"></image>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="null" v-if="list.length==0">
				<image src="/static/img/null.png"></image>
			</view>
			<view class="songList" v-else>
				<view class="content">
					<view class="item" v-for="(item,i) in list" @tap="todetail" :key="i" :data-id="item.id"
						:data-index="i">
						<view class="title">{{item.song}}</view>
						<view class="img">
							<image src="/static/img/music.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="load" v-if="notHave">
				没有更多数据啦
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				id: '',
				list: [],
				notHave: false,
				value: ''
			}
		},
		methods: {
			// 封装请求数据函数
			getData() {
				return new Promise(async (resolve, reject) => {
					if (!this.notHave) {
						let ret = await this.$request({
							url: '/search',
							data: {
								page: this.page,
								value: this.value
							}
						})
						resolve(ret)
					}

				})
			},
			// 搜索
			async search() {
				this.page = 1
				this.notHave = false
				let ret = await this.getData()
				if (ret.length) {
					this.list=ret
				} else {
					this.notHave=true
				}
			},
		},
		async onReachBottom() {
			this.page++
			let ret = await this.getData()
			if (ret.length) {
				this.list = this.list.concat(ret)
			} else {
				this.notHave = true
			}
		}
	}
</script>

<style>
	.contianer{
		height: 90vh;
	}
	.input-bg{
		position: fixed;
		top:80rpx;
		left: 0;
		width: 100%;
		height:140rpx;
		background-color: #fff;
		z-index: 500;
	}
	.load {
		box-sizing: border-box;
		padding: 20rpx;
		text-align: center;
		color: #888;
	}

	.container {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.input-container {
		border: 2rpx solid #e8e8e8;
		border-radius: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 11rpx;
		margin: 20rpx auto;
		width: 80%;
		position: fixed;
		top:80rpx;
		left:50%;
		transform: translateX(-50%);
		background-color: #fff;
	}

	.icon image {
		width: 60rpx;
		height: 60rpx;
	}

	.null {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.null image {
		width: 500rpx;
		height: 500rpx;
	}

	.content {
		margin-top: 100rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.item {
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx;
		border-bottom: 2rpx solid #e8e8ee
	}

	.title {
		width: 70%
	}

	.img {
		width: 15%
	}

	.item image {
		width: 100rpx;
		height: 100rpx
	}
</style>
